/**
 * 版本信息Model页面
 */
import React, {Component} from 'react';
import {Modal, Button, message, Row, Table} from 'antd';
import * as Request from '../../Server/Upgrade';
import * as Const from '../../common/const';
import qs from 'qs';

const defaultPage = {page: Const.DEFAULT_PAGE, size: Const.DEFAULT_PAGE_SIZE};

class VersioninfoMangerModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false, //表格加载样式
            data: [] //表格数据
        };
    }

    componentWillMount() {
        this.getTableData(defaultPage);
    }

    //查询表格数据方法
    getTableData = (param) => {
        this.setState({loading: true});
        const _param = qs.stringify(param);
        Request.getVersionInfoGetList(_param).then(res => {
            if (res && res.code == Const.REQUEST_SUCCESS) {
                const data = res.data;
                this.setState({
                    data: data,
                    loading: false,
                });
            } else {
                res && res.code !== Const.REQUEST_UNAUTHORIZED && message.error(res.msg);
            }
        });
    }

    //保存方法
    handleSubmit = () => {
        const {showModalFunc} = this.props;
        const {selectedRows} = this.state;
        if (selectedRows.length == 0) {
            message.error('请选择一条模板信息！', Const.ERROR_DISAPPEAR_TIME);
        } else {
            showModalFunc(false, selectedRows[0]);
        }
    }

    //选择改变方法
    onSelectChange = (selectedRowKeys, selectedRows) => {
        this.setState({
            selectedRowKeys,
            selectedRows
        })
    }

    render() {
        const {showModalFunc} = this.props;
        const {data, loading, selectedRowKeys} = this.state;
        const rowSelection = {
            type: 'radio',
            selectedRowKeys,
            onChange: this.onSelectChange,
        };

        const columns = [
            {
                title: "主键",
                dataIndex: "id",
                align: 'center',
                width: '8%'
            }, {
                title: "默认下载地址",
                dataIndex: "svrRoot",
                align: 'center',
                width: '12%',
            }, {
                title: "客户端版本",
                dataIndex: "clientversion",
                align: 'center',
                width: '10%',
            }, {
                title: "升级后版本",
                dataIndex: "patchversion",
                align: 'center',
                width: '10%',
            }, {
                title: "下载到本地路径",
                dataIndex: "downdir",
                align: 'center',
                width: '15%',
            }, {
                title: "版本类型",
                dataIndex: "vertype",
                align: 'center',
                width: '15%',
                render: (text, record) => {
                    let obj = Const.VERTYPE.filter(v => v.value == text)[0];
                    return obj ? obj.title : "";
                }
            }, {
                title: "备注",
                dataIndex: "remark",
                align: 'center',
                width: '15%',
            }, {
                title: "状态",
                dataIndex: "tag",
                align: 'center',
                width: '10%',
                render: (text, record) => {
                    if (text == 0) {
                        return <text style={{color: 'red'}}>禁用</text>
                    } else {
                        return <text style={{color: '#32CD32'}}>在用</text>
                    }
                }
            }
        ];

        return (
            <div>
                <Modal
                    visible={true}
                    width="70%"
                    style={{top: 10}}
                    title='选用模板'
                    footer={null}
                    maskClosable={false}
                    onCancel={() => showModalFunc(false, {})}
                >
                    <Table
                        rowSelection={rowSelection}
                        dataSource={data}
                        className='common-font'
                        loading={loading}
                        columns={columns}
                        pagination={false}
                        scroll={{y: 500}}
                    />
                    <Row type="flex" justify="center" style={{paddingTop: 20}}>
                        <Button type="primary" onClick={this.handleSubmit}>保存</Button>
                        <Button type="primary" onClick={() => showModalFunc(false, {})}>返回</Button>
                    </Row>
                </Modal>
                <style>{`
                    .ant-table-tbody > tr.ant-table-row-selected{
                        background:#fafafa;}
                    .ant-table-tbody > tr.ant-table-row-selected:hover{
                    background:#E6F7FF !important;}
                    .ant-table-tbody > tr.ant-table-row-selected td{
                    background:none;}
                `}</style>
            </div>
        )
    }
}

export default VersioninfoMangerModal